<template>
	<view class="content">
		<u-navbar back-text="" title="" :top="topheight">
			<view style="width: 100%;display: flex;justify-content: center;font-weight: bold;font-size: 34rpx;">
				<text style="color: brown;" v-if="chatgroup.status == '禁言'">【禁言中】</text> {{name}}
			</view>
			<view slot="right">
				<view @click="gogroupdetail" style="margin-right: 35rpx;color: #7a7a7a;">
					<u-icon name="more-dot-fill" size="42"></u-icon>
					<u-badge :count="count" type="error" :offset="[12,12]"></u-badge>
				</view>
			</view>
		</u-navbar>

		<view class="msglistview" @click="closePopAll">
			<scroll-view @scrolltoupper="scrolltoupper" :scroll-into-view="siv" style="width: 100%;height: 100%;"
				:scroll-y="scrolly" :scroll-with-animation="animation">

				<view id="loading" v-if="loading"
					style="width: 100%;height: 100rpx;display: flex;justify-content: center;align-items: center;">
					<u-loading mode="circle"></u-loading>
				</view>
				<view v-else style="width: 100%;height: 50rpx;">

				</view>
				<view v-for="(item,k) in messages" :id="`siv_${item.id}`" style="width: 100%;">
					<bgyx-chat-gtext v-if="item.type == 'text'" :index="k" :info="item" />
					<bgyx-chat-gemoji v-if="item.type == 'emoji'" :index="k" :info="item" />
					<bgyx-chat-gimage v-if="item.type == 'image'" :index="k" :info="item" />
					<bgyx-chat-gvideo v-if="item.type == 'video'" :index="k" :info="item" />
					<bgyx-chat-gfile v-if="item.type == 'file'" :index="k" :info="item" />
					<bgyx-chat-gvoice v-if="item.type == 'audio'" :index="k" :info="item" />
					<bgyx-chat-gusercard v-if="item.type == 'usercard'" :index="k" :info="item" />
					<bgyx-chat-gsystem v-if="item.type == 'system'" :index="k" :info="item" />
					<bgyx-chat-ggroupchat v-if="item.type == 'groupcard'" :index="k" :info="item" />
					<bgyx-chat-gredpacket v-if="item.type == 'redpacket'" :index="k" :info="item" />
					<bgyx-chat-gvideocall v-if="item.type == 'videocall' && materwithme(item)" :index="k" :info="item" />
					<bgyx-chat-gaudiocall v-if="item.type == 'audiocall' && materwithme(item)" :index="k" :info="item" />
				</view>
				<view style="height: 1rpx;" id="bottomview0">

				</view>
				<view style="height: 1rpx;" id="bottomview1">

				</view>
				<!-- #ifdef APP -->
				<view style="height: 100rpx;">

				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view style="height: 50rpx;">

				</view>
				<!-- #endif -->
			</scroll-view>
		</view>

		<view style="width: 100%;display: flex;flex-direction: column;">
			<view style="width: 100%;padding: 20rpx;background: #f3f3f3;display: flex;align-items: center;">
				<view style="margin-right: 15rpx;">
					<image v-if="iptmode == 'text'" @click="changekmode('voice')" src="/static/images/iconv.png"
						style="width: 55rpx;height: 55rpx;" mode=""></image>
					<image v-else src="/static/images/iconk.png" @click="changekmode('text')"
						style="width: 55rpx;height: 55rpx;" mode=""></image>
				</view>
				<u-input :disabled="!ishaveright()" :placeholder="(!ishaveright())?'禁言中':'输入内容'"
					v-if="iptmode == 'text'" @keyboardheightchange="kbdchange" :clearable="false" @blur="blur"
					@focus="focus" cursor-spacing="16" :custom-style="cusstyle" auto-height type="textarea"
					:border="false" height="40" confirm-type="send" v-model="textcontent"></u-input>
				<!-- #ifdef APP -->
				<view @touchstart="startRecord" @touchend="endRecord" @touchcancel="cancelRecord" @touchmove="moveTch"
					v-if="iptmode == 'voice'"
					style="display: flex;align-items: center;justify-content: center;border-radius: 10rpx;background: #ebebeb;width: 100%;height: 70rpx;">
					<text class="">
						按住
					</text>
					<view class="">
						<image src="/static/images/icon_mic.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					</view>
					<text class="">
						说话
					</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view @click="startRecordh5" v-if="iptmode == 'voice'"
					style="display: flex;align-items: center;justify-content: center;border-radius: 10rpx;background: #ebebeb;width: 100%;height: 70rpx;">
					<text class="">
						点击
					</text>
					<view class="">
						<image src="/static/images/icon_mic.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					</view>
					<text class="">
						说话
					</text>
				</view>
				<!-- #endif -->
				<view v-if="textcontent == ''" style="margin-left: 15rpx;display: flex;align-items: center;">
					<image @click="showbtm('emoji')" src="/static/images/icone.png"
						style="width: 55rpx;height: 55rpx;margin-right: 12rpx;" mode="">
					</image>
					<image @click="showbtm('tool')" src="/static/images/plus.png" style="width: 55rpx;height: 55rpx;"
						mode=""></image>
				</view>
				<view v-else style="margin-left: 15rpx;display: flex;align-items: center;">
					<view @click="sendtext"
						style="background: #00aaff;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;color: white;height: 65rpx;padding: 5rpx;width: 120rpx;">
						发送
					</view>
				</view>
			</view>

			<view v-if="showbtmmn" style="width: 100%;height: 250px;">
				<view v-if="btmtype == 'tool'"
					style="width: 100%;padding: 20rpx 50rpx;height: 250px; background: #f3f3f3;display: flex;justify-content: space-around;align-items: center;flex-direction: column;">
					<view style="width: 100%;display: flex;justify-content: space-around;align-items: center;">
						<view @click="uploadimg(0)" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mnimg.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								相册
							</view>
						</view>
						<view @click="uploadimg(1)" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mncamera.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								拍摄
							</view>
						</view>
						<view @click="sendvideocall()" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mnvdc.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								视频通话
							</view>
						</view>
						<view @click="sendaudiocall()" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mnadc.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								语音通话
							</view>
						</view>
					</view>
					<view style="width: 100%;display: flex;justify-content: space-around;align-items: center;">
						<view @click="uploadvideo" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mnvd.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								视频
							</view>
						</view>
						<view @click="sendred" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mnred.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								红包
							</view>
						</view>
						<view @click="uploadfile" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mnfile.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								文件
							</view>
						</view>
						<view @click="showcolletc" style="display: flex;flex-direction: column;align-items: center;">
							<view
								style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;background: white;border-radius: 8rpx;">
								<image src="/static/images/mnlike.png" style="width: 60rpx;" mode="widthFix"></image>
							</view>
							<view style="margin-top: 10rpx;font-size: 25rpx;">
								收藏
							</view>
						</view>
					</view>
				</view>

				<view v-if="btmtype == 'emoji'"
					style="width: 100%;padding: 20rpx 50rpx;height: 250px; background: #f3f3f3;display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;">
					<view @click="sendemoji(iem)" v-for="(iem,km) in arr50"
						style="width: 60rpx;height: 60rpx;margin: 6rpx; ">
						<image :src="`/static/images/emoji/EMOJI-_${iem}.png`" style="width: 60rpx;height: 60rpx;"
							mode=""></image>
					</view>
				</view>

			</view>
		</view>

		<u-popup v-model="colshow" mode="bottom" border-radius="16" height="85vh">
			<view
				style="width: 100%;height: 85vh;display: flex;flex-direction: column;padding: 20rpx;background: #e6e6e6;overflow-y: hidden;">
				<view style="font-weight: bold;display: flex;align-items: center;justify-content: space-between;">
					<text style="font-size: 40rpx;">我的收藏</text>
					<image src="/static/images/mnlike.png" style="width: 70rpx;height: 70rpx;" mode=""></image>
				</view>
				<scroll-view style="width: 100%;display: flex;flex-direction: column;flex: 1;overflow-y: auto;"
					scroll-y>
					<bgyx-collect-item v-for="(item,k) in $store.state.user.collect" :item="item" v-if="item.type"
						:choose="true" />
				</scroll-view>
			</view>
		</u-popup>

		<view v-if="recording" class="recordbg">
			<image src="/static/images/recording.gif" style="width: 580rpx;" mode="widthFix"></image>
			<text style="margin: -100rpx auto;color:floralwhite;font-size: 42rpx;">录音中</text>
			<!-- #ifdef H5 -->
			<view style="width: 100%;margin-top: 200rpx;display: flex;justify-content: center;">
				<u-button @click="endRecordh5" style="" size="medium" shape="circle" type="error">停止</u-button>
			</view>
			<!-- #endif -->
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	function delay(t) {
		return new Promise(r => {
			setTimeout(() => {
				r(t)
			}, t)
		})
	}

	import moment from 'moment';
	import {
		mapState
	} from 'vuex';
	import {
		pub,
		sub,
		unsub
	} from '../../common/event';
	import utils from '../../utils';
	import permision from "@/js_sdk/wa-permission/permission.js"
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();

	// #ifdef H5
	let audioCtx, mediaRecorder, recordedBlobs;
	class Blobs {
		constructor() {
			this.blobs = [];
		}

		push(blob) {
			this.blobs.push(blob);
		}

		getBlob() {
			return new Blob(this.blobs, {
				type: 'audio/webm'
			});
		}
	}
	// #endif

	export default {
		data() {
			return {
				id: '',
				name: '',
				btmtype: 'tool',
				showbtmmn: false,
				textcontent: '',
				topheight: 0,
				siv: 'bottomview0',
				iptmode: 'text',
				scrolly: true,
				loading: false,
				finish: false,
				cusstyle: {
					'line-height': '40rpx',
					'background': '#fff',
					'padding': '15rpx',
					'flex': 1,
					'border-radius': '12rpx'
				},
				animation: true,
				arr50: [],
				colshow: false,
				touchY: '',
				touchEndY: '',
				voices: 0,
				voicee: 0,
				voiceStatus: 0,
				recording: false,
				audiosq: false,
				recordtom: '',
				messages: []
			}
		},
		components: {

		},
		onUnload() {
			unsub("socket_togroup_message", this.handlestm)
			unsub("socket_myself_message", this.handletmm)
			unsub("sendcollect", this.sendcollect)
			unsub("fmessagelistdone", this.getdata)
			unsub("socket_systemupdategroup", this.systemupdategroup)
			
			this.$store.dispatch({
				type: "friend/setTimeDb",
				payload: {
					id: this.rid,
					time: moment().valueOf()
				}
			})
			this.$store.commit("friend/setCurrent", {})
		},
		onLoad({
			id,
			name,
			rid
		}) {
			this.id = id
			this.rid = rid
			this.name = name
			// sub("fmessagelistdone",this.getdata)
			this.getdata()

			const _this = this

			this.arr50 = []
			for (let i = 1; i < 55; i++) {
				this.arr50.push(i)
			}

			sub("socket_togroup_message", this.handlestm)

			sub("socket_myself_message", this.handletmm)

			sub("sendcollect", this.sendcollect)

			sub("socket_togroup_removemessage", this.removemessage)

			sub("moregmessagedone", this.getdata)

			sub("socket_getremoveuser", this.beremove)

			sub("socket_togroup_chatgroupchange", (e) => {
				this.name = e.name
			})
			
			sub("socket_systemupdategroup", this.systemupdategroup)
			
			

			this.$store.dispatch({
				type: "friend/setTimeDb",
				payload: {
					id,
					time: moment().valueOf()
				}
			})

			setTimeout(() => {
				this.gobtm()
			}, 300)
		},
		computed: {
			...mapState({
				chatgroup: function(state) {
					const ret = state.friend.chatgroup?.find(e => e.id == this.id)

					if (ret) {
						return ret
					} else {
						return {}
					}
				},
				relation: function(state) {
					return state.friend.list?.find(e => e.id = state.friend.current.id)
				},
				myself: function(state) {
					const ret = state.friend.chatgroup?.find(e => e.id == this.id)
					const gusers = state.friend.groups[this.id]
					const user = state.user.user
					const retuser = gusers?.find(e=>e.uid == user.id)
					return retuser
				},
				count: function(state) {
					const ret = state.friend.chatgroup?.find(e => e.id == this.id)
					const gusers = state.friend.groups[this.id]
					const user = state.user.user
					const retuser = gusers?.find(e=>e.uid == user.id)
					if(retuser && retuser.type == '普通成员'){
						return 0
					}
					const gapply = state.apply.glist.filter(e=>e.gid == this.id && e.status == '申请中')
					
					return gapply.length
				},
			})
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		onReady() {
			const _this = this
			recorderManager.onStop(async function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				if (this.audiosq) {
					this.audiosq = false
					return
				}
				const timelong = Math.floor((_this.voicee - _this.voices) / 1000)
				if (_this.voiceStatus == 1) {
					const voicePath = res.tempFilePath;
					const ret = await utils.uploadAudio(voicePath)
					if (ret && ret.data) {
						_this.sendvoice(ret.data.pathname, timelong)
					}
				}

			});
		},
		watch: {
			chatgroup: (v) => {
				if(v.status == "封禁"){
					uni.showModal({
						title:"封禁",
						content:"群聊已封禁，该群无法使用任何功能!",
						success() {
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
					})
				}
			}
		},
		methods: {
			systemupdategroup:function(e){
				if(this.id == e.id && e.status == '封禁'){
					uni.showModal({
						title:"封禁",
						content:"群聊已封禁，该群无法使用任何功能!",
						success() {
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
					})
				}
			},
			ishaveright: function(){
				if(this.chatgroup.status == '正常'){
					return true
				}
				if(this.myself.type == '群主' || this.myself.type == '管理员'){
					return true
				}
				
				return false
			},
			onGetMessage: function() {
				const _this = this
				_this.$nextTick(() => {
					_this.anc = _this.anc == "bottomHref" ? "bottomHrefx" : "bottomHref"
				})
			},
			getSettings: async function() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();

				if (systemInfo.platform === 'android') {
					const ret = await permision.requestAndroidPermission("android.permission.RECORD_AUDIO")
					return ret == 1
				} else if (systemInfo.platform === 'ios') {
					return permision.judgeIosPermission("record")
				}


			},
			startRecordh5: async function(e) {
				const _this = this
				this.recording = true
				const constraints = {
					audio: true
				};
				this.recordtom = setTimeout(() => {
					this.endRecordh5()
				}, 60000)
				navigator.mediaDevices.getUserMedia(constraints)
					.then(function(stream) {
						let m0 = moment().valueOf()
						audioCtx = new AudioContext();
						const microphone = audioCtx.createMediaStreamSource(stream);
						recordedBlobs = new Blobs();

						// 创建一个用于处理音频流的MediaRecorder实例
						mediaRecorder = new MediaRecorder(stream);

						mediaRecorder.ondataavailable = async event => {
							if (event.data && event.data.size > 0) {
								let m1 = moment().valueOf()
								recordedBlobs.push(event.data);
								console.log(recordedBlobs)
								const blob = recordedBlobs.getBlob();
								const url = URL.createObjectURL(blob);
								console.log(blob, url)

								const file = new File([blob], 'recording.mp3', {
									type: 'audio/mp3',
								});
								console.log(file)
								const ret = await utils.uploadVideo(file)
								console.log(ret)
								const tm = Math.floor((m1 - m0) / 1000)
								_this.sendvoice(ret.data.pathname, tm)
								if (stream) {
									stream.getTracks().forEach(track => {
										track.stop();
									});
									stream = null;
								}
							}
							console.log(recordedBlobs)
						};

						mediaRecorder.start();
					})
					.catch(function(err) {
						console.error(err);
					});
			},
			startRecord: async function(e) {
				const authorize = await this.getSettings()
				console.log("authorize", authorize)
				if (!authorize) {
					// this.audiosq = true
					// recorderManager.start()
					// recorderManager.stop()
					return
				}
				this.voiceStatus = 0
				this.touchY = e.changedTouches[0].clientY
				this.voices = moment().valueOf()
				this.recording = true
				recorderManager.start()
				this.recordtom = setTimeout(() => {
					this.endRecord()
				}, 60000)
			},
			endRecordh5: async function() {
				this.recording = false
				mediaRecorder.stop();
				clearTimeout(this.recordtom)
			},
			endRecord: function(e) {
				if (this.touchEndY && this.touchY - this.touchEndY > 30) {
					this.recording = false
					this.voiceStatus = 2
					uni.showToast({
						title: "已取消",
						icon: "none"
					})

					this.touchY = ''
					this.touchEndY = ''
					recorderManager.stop()
					return
				}
				this.voicee = moment().valueOf()
				console.log(`ssttop`, this.voicee)
				this.voiceStatus = 1
				this.touchY = ''
				this.touchEndY = ''
				this.recording = false
				recorderManager.stop()
				clearTimeout(this.recordtom)
			},
			cancelRecord: function(e) {
				this.voiceStatus = 2
				this.touchY = ''
				this.touchEndY = ''
				this.recording = false
				recorderManager.stop()
			},
			moveTch: function(e) {
				const touchY = e.changedTouches[0].clientY
				this.touchEndY = touchY
			},
			materwithme: function(e){
				
				const user = this.$store.state.user.user
				if(e.note.includes(user.id+"_")){
					return true
				}
				return false
			},
			changekmode: async function(e) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				if (e == 'voice') {
					const authorize = await this.getSettings()
					console.log("authorize", authorize)
					if (!authorize) {
						return
					}
				}
				this.iptmode = e
			},
			showcolletc: function() {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.colshow = true
			},
			sendred: function() {
				uni.navigateTo({
					url:"/pages/friend/sendgred?id="+this.id
				})
			},
			uploadfile: function() {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				const _this = this
				// #ifdef H5
				uni.chooseFile({
					count: 1,
					async success(res) {
						console.log(res)
						const path = res.tempFiles[0]
						const ret = await utils.uploadVideo(path)
						console.log(ret)
						if (ret && ret.success && ret.data && ret.data.pathname) {
							_this.sendfile(ret.data.pathname, path)
						} else {
							uni.showToast({
								title: "发送失败",
								icon: "none"
							})
						}
					}
				})
				// #endif

				// #ifdef APP
				this.showbtmmn = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				uni.navigateTo({
					url: "/pages/uploadfile/index?gid=" + this.id + "&name=" + this.name
				})
				// #endif
			},
			uploadvideo: function() {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				const _this = this
				// #ifdef APP
				uni.chooseVideo({
					async success(res) {
						console.log(res)
						const path = res.tempFilePath
						uni.getVideoInfo({
							src: path,
							async success(vdinfo) {
								console.log("Aaaa", vdinfo)
								const ww = vdinfo.width
								const hh = vdinfo.height
								const ret = await utils.uploadVideo(path)
								console.log(ret)
								if (ret && ret.success && ret.data && ret.data.pathname) {
									_this.sendimage('video', ret.data.pathname, ww, hh)
								} else {
									uni.showToast({
										title: "发送失败",
										icon: "none"
									})
								}
							}
						})

					}
				})
				// #endif

				// #ifdef H5
				uni.chooseVideo({
					async success(res) {
						console.log(res)
						const path = res.tempFile
						uni.getVideoInfo({
							src: res.tempFilePath,
							async success(vdinfo) {
								const ww = vdinfo.width
								const hh = vdinfo.height
								const ret = await utils.uploadVideo(path)
								console.log(ret)
								if (ret && ret.success && ret.data && ret.data.pathname) {
									_this.sendimage('video', ret.data.pathname, ww, hh)
								} else {
									uni.showToast({
										title: "发送失败",
										icon: "none"
									})
								}
							}
						})

					}
				})
				// #endif

			},
			uploadimg: function(type) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				const _this = this
				// #ifdef APP
				if (type == 0) {
					uni.chooseImage({
						count: 1,
						sourceType: ['album'],
						async success(res) {
							console.log(res)
							const ret = await utils.uploadImage(res.tempFilePaths[0])
							console.log(ret)
							if (ret && ret.success && ret.data && ret.data.pathname) {
								_this.sendimage('image', ret.data.pathname)
							} else {
								uni.showToast({
									title: "发送失败",
									icon: "none"
								})
							}
						}
					})
				} else {
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						async success(res) {
							console.log(res)
							const ret = await utils.uploadImage(res.tempFilePaths[0])
							console.log(ret)
							if (ret && ret.success && ret.data && ret.data.pathname) {
								_this.sendimage('image', ret.data.pathname)
							} else {
								uni.showToast({
									title: "发送失败",
									icon: "none"
								})
							}
						}
					})
				}
				// #endif

				// #ifdef H5
				if (type == 0) {
					uni.chooseImage({
						count: 1,
						async success(res) {
							console.log(res)
							const ret = await utils.uploadImage(res.tempFilePaths[0])
							console.log(ret)
							if (ret && ret.success && ret.data && ret.data.pathname) {
								_this.sendimage('image', ret.data.pathname)
							} else {
								uni.showToast({
									title: "发送失败",
									icon: "none"
								})
							}
						}
					})
				} else {
					uni.chooseImage({
						count: 1,
						async success(res) {
							console.log(res)
							const ret = await utils.uploadImage(res.tempFilePaths[0])
							console.log(ret)
							if (ret && ret.success && ret.data && ret.data.pathname) {
								_this.sendimage('image', ret.data.pathname)
							} else {
								uni.showToast({
									title: "发送失败",
									icon: "none"
								})
							}
						}
					})
				}
				// #endif
			},
			showbtm: function(e) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				if (this.showbtmmn) {
					if (e == this.btmtype) {
						this.showbtmmn = false
					} else {
						this.btmtype = e
					}
				} else {
					this.btmtype = e
					this.showbtmmn = true
				}
			},
			removemessage: function(ex) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.messages = this.messages.filter(e => e.id != ex.id)
			},
			handletmm: function() {
				this.gobtm()
				this.$store.dispatch({
					type: "friend/setTimeDb",
					payload: {
						id: this.rid,
						time: moment().valueOf()
					}
				})
			},
			handlestm: function() {
				this.gobtm()
				this.$store.dispatch({
					type: "friend/setTimeDb",
					payload: {
						id: this.rid,
						time: moment().valueOf()
					}
				})
			},
			closePopAll: function() {
				this.showbtmmn = false
				pub("closePopAll", {})
			},
			gobtm: function() {
				if (this.loading) {
					return
				}
				setTimeout(() => {
					if (this.siv == 'bottomview0') {
						this.siv = 'bottomview1'
					} else {
						this.siv = 'bottomview0'
					}
				}, 5)
			},
			beremove: function(e) {
				if (e.gid == this.id) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				}
			},
			getdata: function() {
				const list = this.$store.state.message.list[`g_${this.id}`]

				if (list) {
					this.messages = list.sort((a, b) => a.time - b.time)
				} else {
					this.$store.dispatch({
						type: "message/initFmessage",
						payload: {
							gid: this.id
						}
					})
				}

			},
			gogroupdetail: function() {
				uni.navigateTo({
					url: "/pages/friend/gdetail?id=" + this.id
				})
			},
			sendfile: async function(t, e) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.showbtmmn = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				const str = t
				const user = this.$store.state.user.user

				const data = {
					name: user.name,
					uid: user.id,
					toname: '',
					toid: 0,
					gid: this.id,
					gname: this.name,
					type: 'file',
					content: `${str}`,
					timelong: Math.floor(e.size * 1),
					time: moment().valueOf(),
					money: 0,
					status: '正常',
					note: e.name
				}
				const ret = await this.$u.post(`chat/chat/sendGMessage`, data)

				data.id = ret.data
				console.log(ret)

				this.gobtm()
			},
			sendvoice: async function(t, e) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.showbtmmn = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				const str = t
				const user = this.$store.state.user.user

				const data = {
					name: user.name,
					uid: user.id,
					toname: '',
					toid: 0,
					gid: this.id,
					gname: this.name,
					type: 'audio',
					content: `${str}`,
					timelong: e,
					time: moment().valueOf(),
					money: 0,
					status: '正常',
					note: ''
				}
				const ret = await this.$u.post(`chat/chat/sendGMessage`, data)

				data.id = ret.data
				console.log(ret)

				this.gobtm()
			},
			sendvideocall: async function() {
				const retps = await utils.checkPermission("请打开摄像头和麦克风权限")
				if (!retps) {
					uni.showToast({
						title: "请打开摄像头和麦克风权限",
						icon: "none"
					})
					return
				}
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.showbtmmn = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				
				uni.navigateTo({
					url:"/pages/friend/csgroupuserdcall?id="+this.id+'&name='+this.name
				})
			},
			sendaudiocall: async function() {
				const retps = await utils.checkPermission("请打开摄像头和麦克风权限")
				if (!retps) {
					uni.showToast({
						title: "请打开摄像头和麦克风权限",
						icon: "none"
					})
					return
				}
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.showbtmmn = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				
				uni.navigateTo({
					url:"/pages/friend/csgroupuserdcalla?id="+this.id+'&name='+this.name
				})
			},
			sendimage: async function(t, e, w, h) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.showbtmmn = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				const str = e
				const user = this.$store.state.user.user

				const data = {
					name: user.name,
					uid: user.id,
					toname: '',
					toid: 0,
					gid: this.id,
					gname: this.name,
					type: t,
					content: `${str}`,
					timelong: w,
					time: moment().valueOf(),
					money: h,
					status: '正常',
					note: ''
				}
				const ret = await this.$u.post(`chat/chat/sendGMessage`, data)

				data.id = ret.data
				console.log(ret)

				this.gobtm()
			},
			sendcollect: async function(e) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.colshow = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				const user = this.$store.state.user.user

				const data = e
				data.uid = user.id
				data.name = user.name
				data.gid = this.id
				data.gname = this.name
				data.time = moment().valueOf()

				const ret = await this.$u.post(`chat/chat/sendGMessage`, data)

				data.id = ret.data
				console.log(ret)


				this.gobtm()
			},
			sendemoji: async function(e) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				this.showbtmmn = false
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				const str = e
				const user = this.$store.state.user.user

				const data = {
					name: user.name,
					uid: user.id,
					toname: '',
					toid: 0,
					gid: this.id,
					gname: this.name,
					type: 'emoji',
					content: `EMOJI-_${str}`,
					timelong: 0,
					time: moment().valueOf(),
					money: 0,
					status: '正常',
					note: ''
				}
				const ret = await this.$u.post(`chat/chat/sendGMessage`, data)

				data.id = ret.data
				console.log(ret)


				this.gobtm()
			},
			sendtext: async function(e) {
				if (!this.ishaveright()) {
					this.$refs.uToast.show({
						title: '禁言中..',
						type: 'error',
					})
					return
				}
				if (this.relation.status == "被拉黑" || this.relation.status == "被删除") {
					uni.showToast({
						title: "消息被对方拒收",
						icon: "none"
					})
					return
				}
				const str = this.textcontent
				this.textcontent = ''
				console.log(this.textcontent)
				const user = this.$store.state.user.user

				const data = {
					name: user.name,
					uid: user.id,
					toname: '',
					toid: 0,
					gid: this.id,
					gname: this.name,
					type: 'text',
					content: str,
					timelong: 0,
					time: moment().valueOf(),
					money: 0,
					status: '正常',
					note: ''
				}
				const ret = await this.$u.post(`chat/chat/sendGMessage`, data)

				data.id = ret.data
				console.log(ret)


				this.gobtm()
			},
			scrolltoupper: async function(e) {
				if (this.loading || this.finish) {
					this.scrolly = true
					return
				}
				this.loading = true
				this.animation = false
				this.scrolly = false

				if (!this.messages || this.messages.length == 0) {
					this.loading = false
					this.scrolly = true
					return
				}
				const lastmsg = this.messages[0]
				const payload = {
					...lastmsg,
					gid: this.id
				}
				const ret = await this.$store.dispatch({
					type: "message/loadmoregmessage",
					payload
				})
				setTimeout(() => {
					this.siv = `siv_${lastmsg.id}`
					this.animation = true
				}, 1500)
				setTimeout(() => {
					this.loading = false
				}, 1800)
				if (ret && ret.data && ret.data.length < 100) {
					this.finish = true
				}
				this.scrolly = true
			},
			focus: function(e) {
				// #ifdef APP
				// this.showbtmmn = false
				// #endif
			},
			blur: function(e) {
				this.topheight = 0
			},
			kbdchange: function(e) {
				console.log(e)
				const h = e.target.height
				// this.topheight = `${h}px`
			}
		}
	}
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
		justify-content: space-between;
	}

	.msglistview {
		width: 100%;
		background: #efefef;
		flex: 1;
		flex-shrink: 0;
		overflow-y: hidden;
	}

	.recordbg {
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #fff, #1e1e1eaa, #070707dd);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>